import { EllipsisOutlined, PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable, TableDropdown } from '@ant-design/pro-components';
import { Button, Dropdown, Space, Tag } from 'antd';
import { useRef } from 'react';
import request from 'umi-request';
import AddNews from './AddNews';
import DetailsNews from './DetailsNews';
export const waitTimePromise = async (time: number = 100) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(true);
        }, time);
    });
};

export const waitTime = async (time: number = 100) => {
    await waitTimePromise(time);
};

type GithubIssueItem = {
    url: string;
    id: number;
    number: number;
    title: string;
    labels: {
        name: string;
        color: string;
    }[];
    state: string;
    comments: number;
    created_at: string;
    updated_at: string;
    closed_at?: string;
};


export default () => {
    const actionRef = useRef<ActionType>();
    const columns: ProColumns<GithubIssueItem>[] = [
        {
            dataIndex: 'index',
            valueType: 'indexBorder',
            width: 48,
        },
        {
            title: '标题',
            dataIndex: 'title',
            copyable: true,
            ellipsis: true,
            tooltip: '标题过长会自动收缩',
            formItemProps: {
                rules: [
                    {
                        required: true,
                        message: '此项为必填项',
                    },
                ],
            },
            render: (dom, record, _index, action) => {
                return (
                    <div
                        style={{
                            textAlign: 'left',
                            textOverflow: 'ellipsis',
                            whiteSpace: 'nowrap',
                            overflow: 'hidden',
                        }}
                    >
                        <DetailsNews
                            id={record.id}
                            name={record.title}
                            onRefurbish={() => {
                                actionRef?.current?.reload();
                            }}
                        />
                    </div>
                );
            },
        },
        {
            disable: true,
            title: '发布媒体',
            dataIndex: 'site',
            filters: true,
            onFilter: true,
            ellipsis: true,
            valueType: 'select',
            valueEnum: {
                all: { text: '超长'.repeat(50) },
                open: {
                    text: '未解决',
                    status: 'Error',
                },
                closed: {
                    text: '已解决',
                    status: 'Success',
                    disabled: true,
                },
                processing: {
                    text: '解决中',
                    status: 'Processing',
                },
            },
        },
        // {
        //     disable: true,
        //     title: '标签',
        //     dataIndex: 'labels',
        //     search: false,
        //     renderFormItem: (_, { defaultRender }) => {
        //         return defaultRender(_);
        //     },
        //     render: (_, record) => (
        //         <Space>
        //             {record.labels.map(({ name, color }) => (
        //                 <Tag color={color} key={name}>
        //                     {name}
        //                 </Tag>
        //             ))}
        //         </Space>
        //     ),
        // },
        {
            title: '发布日期',
            key: 'pubtime',
            dataIndex: 'pubtime',
            valueType: 'date',
            sorter: true,
            hideInSearch: true,
        },
        // {
        //     title: '创建时间',
        //     dataIndex: 'created_at',
        //     valueType: 'dateRange',
        //     hideInTable: true,
        //     search: {
        //         transform: (value) => {
        //             return {
        //                 startTime: value[0],
        //                 endTime: value[1],
        //             };
        //         },
        //     },
        // },
        {
            title: '操作',
            valueType: 'option',
            key: 'option',
            render: (text, record, _, action) => [
                <a
                    key="editable"
                    onClick={() => {
                        action?.startEditable?.(record.id);
                    }}
                >
                    编辑
                </a>,
                // <a href={record.url} target="_blank" rel="noopener noreferrer" key="view">
                //     查看
                // </a>,
                // <TableDropdown
                //     key="actionGroup"
                //     onSelect={() => action?.reload()}
                //     menus={[
                //         { key: 'copy', name: '复制' },
                //         { key: 'delete', name: '删除' },
                //     ]}
                // />,
            ],
        },
    ];

    return (
        <ProTable
            columns={columns}
            actionRef={actionRef}
            cardBordered
            request={async (params, sort, filter) => {
                // console.log(sort, filter);
                // await waitTime(2000);
                // return request<{
                //     data: GithubIssueItem[];
                // }>('https://proapi.azurewebsites.net/github/issues', {
                //     params,
                // });
            }}
            editable={{
                type: 'multiple',
            }}
            columnsState={{
                persistenceKey: 'pro-table-singe-demos',
                persistenceType: 'localStorage',
                defaultValue: {
                    option: { fixed: 'right', disable: true },
                },
                onChange(value) {
                    console.log('value: ', value);
                },
            }}
            rowKey="id"
            search={{
                labelWidth: 'auto',
            }}
            options={{
                setting: {
                    listsHeight: 400,
                },
            }}
            form={{
                // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
                syncToUrl: (values, type) => {
                    if (type === 'get') {
                        return {
                            ...values,
                            created_at: [values.startTime, values.endTime],
                        };
                    }
                    return values;
                },
            }}
            pagination={{
                pageSize: 5,
                onChange: (page) => console.log(page),
            }}
            dateFormatter="string"
            toolBarRender={() => [
                <AddNews onRefurbish={actionRef.current?.reload()}></AddNews>,
              
            ]}
        />
    );
};